<template>
  <div class="main">
    <div class="header blue" v-if="systemInfo">
      <div class="inner ovh">
        <div class="fl ml20">
          <a href="/" style="height: 100%;">
            <img :src="uploadPath + systemInfo.logo" :alt="systemInfo.name" style="height:80px"/>
            <span
                style="font-size: 37px; line-height: 80px; float: right; color: #FFFFFF; font-weight: bold; font-family: '新宋体'">{{
                systemInfo.name
              }}</span>
          </a>
        </div>
      </div>
    </div>
    <div style="background-color:#1376c7;" v-if="menus.length">
      <div class="menu" style="width:1200px;text-align:center;margin-left:auto;margin-right:auto;">
        <ul>
          <li class="menu-item active" v-for="item in menus" :key="item.id">
            <a :href="item.url === '#' ? (item.isList ? '/list/' : '/menu-info/') + item.id : item.url" style="display: block;width: 115px;height: 40px;line-height: 40px;text-align: center;color: #fff;text-decoration: none;font-size: 16px;">{{ item.name }}</a>
          </li>
          <li class="menu-item active">
            <a href="/" style="display: block;width: 115px;height: 40px;line-height: 40px;text-align: center;color: #fff;text-decoration: none;font-size: 16px;">网站首页</a>
          </li>
          <li class="menu-item">
            <a href="/a/xueyuangaikuang/" style="display: block;width: 100px;	height: 40px;line-height: 40px;	text-align: center;color: #fff;text-decoration: none;font-size: 16px;">
            学院概况 </a>
            <div class="menu-drop">
              <ul>
                <a href="/a/xueyuanjianjie/">
                  <li title="学院简介"> 学院简介</li>
                </a> <a href="/a/xianrenlingdao/">
                <li title="现任领导"> 现任领导</li>
              </a> <a href="/a/xuexiaorongyu/">
                <li title="学校荣誉"> 学校荣誉</li>
              </a> <a href="/a/xiaoyuanfengjing/">
                <li title="校园风景"> 校园风景</li>
              </a>
              </ul>
            </div>
          </li>
          <li class="menu-item"><a href="/a/dangqunzuzhi/"
                                   style="display: block;width: 100px;	height: 40px;line-height: 40px;	text-align: center;color: #fff;text-decoration: none;font-size: 16px;">
            党群组织</a>
            <div class="menu-drop">
              <ul>
                <a href="/a/dangweibangongshi/">
                  <li title="党委办公室"> 党委办公室</li>
                </a> <a href="/a/zuzhibu/">
                <li title="组织部"> 组织部</li>
              </a> <a href="/a/xueshenggongzuobu/">
                <li title="学生工作部"> 学生工作部</li>
              </a> <a href="/a/tuanwei/">
                <li title="团委"> 团委</li>
              </a>
              </ul>
            </div>
          </li>
          <li class="menu-item"><a href="/a/xingzhengjigou/"
                                   style="display: block;width: 100px;	height: 40px;line-height: 40px;	text-align: center;color: #fff;text-decoration: none;font-size: 16px;">
            行政机构 </a>
            <div class="menu-drop">
              <ul>
                <a href="/a/yuanchangbangongshi/">
                  <li title="院长办公室"> 院长办公室</li>
                </a> <a href="/a/fazhanguihuachu/">
                <li title="发展规划处"> 发展规划处</li>
              </a> <a href="/a/renshichu/">
                <li title="人事处"> 人事处</li>
              </a> <a href="/a/xueshengchu/">
                <li title="学生处"> 学生处</li>
              </a>
              </ul>
            </div>
          </li>
          <li class="menu-item"><a href="/a/xibushezhi/"
                                   style="display: block;width: 100px;	height: 40px;line-height: 40px;	text-align: center;color: #fff;text-decoration: none;font-size: 16px;">
            系部设置 </a>
            <div class="menu-drop">
              <ul>
                <a href="/a/dianzigongchengxi/">
                  <li title="电子工程系"> 电子工程系</li>
                </a> <a href="/a/xinxigongchengxi/">
                <li title="信息工程系"> 信息工程系</li>
              </a> <a href="/a/jidiangongchengxi/">
                <li title="机电工程系"> 机电工程系</li>
              </a> <a href="/a/jingmaoguanlixi/">
                <li title="经贸管理系"> 经贸管理系</li>
              </a> <a href="/a/tiyujiaoxuebu/">
                <li title="体育教学部"> 体育教学部</li>
              </a> <a href="/a/yishushejixi/">
                <li title="艺术设计系"> 艺术设计系</li>
              </a>
              </ul>
            </div>
          </li>
          <li class="menu-item"><a href="/a/jiaofudanwei/"
                                   style="display: block;width: 100px;	height: 40px;line-height: 40px;	text-align: center;color: #fff;text-decoration: none;font-size: 16px;">
            教辅单位 </a>
            <div class="menu-drop">
              <ul>
                <a href="/a/shiyanshixunzhongxin/">
                  <li title="实验实训中心"> 实验实训中心</li>
                </a> <a href="/a/wangluojishuzhongxin/">
                <li title="网络技术中心"> 网络技术中心</li>
              </a> <a href="/a/tushuguan/">
                <li title="图书馆"> 图书馆</li>
              </a>
              </ul>
            </div>
          </li>
          <li class="menu-item"><a href="/a/zhaoshengjiuye/"
                                   style="display: block;width: 100px;	height: 40px;line-height: 40px;	text-align: center;color: #fff;text-decoration: none;font-size: 16px;">
            招生就业 </a>
            <div class="menu-drop">
              <ul>
                <a href="/a/zhaoshengxinxi/">
                  <li title="招生信息"> 招生信息</li>
                </a> <a href="/a/jiuyexinxi/">
                <li title="就业信息"> 就业信息</li>
              </a>
              </ul>
            </div>
          </li>
          <li class="menu-item"><a href="/a/xinxigongkai/"
                                   style="display: block;width: 100px;	height: 40px;line-height: 40px;	text-align: center;color: #fff;text-decoration: none;font-size: 16px;">
            信息公开 </a>
            <div class="menu-drop">
              <ul>
                <a href="/a/xinwendongtai/">
                  <li title="新闻动态"> 新闻动态</li>
                </a> <a href="/a/tongzhigonggao/">
                <li title="通知公告"> 通知公告</li>
              </a>
              </ul>
            </div>
          </li>
          <li class="menu-item"><a href="/a/xiaoyuanwenhua/"
                                   style="display: block;width: 100px;	height: 40px;line-height: 40px;	text-align: center;color: #fff;text-decoration: none;font-size: 16px;">
            校园文化 </a>
            <div class="menu-drop">
              <ul>
                <a href="/a/tuanyuan/">
                  <li title="团员"> 团员</li>
                </a> <a href="/a/xueshenghui/">
                <li title="学生会"> 学生会</li>
              </a> <a href="/a/shetuan/">
                <li title="社团"> 社团</li>
              </a>
              </ul>
            </div>
          </li>
          <li class="menu-item"><a href="/a/jiaoxuekeyan/"
                                   style="display: block;width: 100px;	height: 40px;line-height: 40px;	text-align: center;color: #fff;text-decoration: none;font-size: 16px;">
            教学科研 </a>
            <div class="menu-drop">
              <ul>
                <a href="/a/jiaoshifengcai/">
                  <li title="教师风采"> 教师风采</li>
                </a> <a href="/a/ziyuanjianshe/">
                <li title="资源建设"> 资源建设</li>
              </a> <a href="/a/jiaoyanshichuang/">
                <li title="教研视窗"> 教研视窗</li>
              </a>
              </ul>
            </div>
          </li>
          <li class="menu-item"><a href="/a/zhuanyeshezhi/"
                                   style="display: block;width: 100px;	height: 40px;line-height: 40px;	text-align: center;color: #fff;text-decoration: none;font-size: 16px;">
            专业设置 </a>
            <div class="menu-drop">
              <ul>
                <a href="/a/zhuanyeliebiao/">
                  <li title="专业列表"> 专业列表</li>
                </a> <a href="/a/tesezhuanye/">
                <li title="特色专业"> 特色专业</li>
              </a>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import uploadPath from "../util/globa";

export default {
  name: "Hearder",
  data() {
    return {
      uploadPath: uploadPath,
      systemInfo: null,
      menus: []
    }
  },
  mounted() {
    this.$http.get('system-info/1').then(res => {
      if (res.code === 200) {
        this.systemInfo = res.data
      }
    })
    this.$http.post('menu/tree', {}).then(res => {
      if (res.code === 200) {
        this.menus = res.data
      }
    })
  }
}
</script>

<style scoped>

</style>